<template>
  <div class="home">
    <div class="header">
      <div class="address_map" @click="$router.push( { name: 'address', params:{city:city} })">
        <!-- @click="$router.push('/address')" -->
        <!-- @click="$router.push({name: 'address',params: {city: city}})" -->
        <i class="fa fa-map-marker"></i>
        <span>{{address}}</span>
        <i class="fa fa-sort-desc"></i>
      </div>
    </div>

    <div class="search_wrap" @click="$router.push('/search')">
      <div class="shop_search" >
        <i class="fa fa-search"></i>
        搜索商家 商家名称
      </div>
    </div>

    <div id="container">
      <!-- 轮播 -->
      <mt-swipe :auto="3000" class="swiper">
        <mt-swipe-item v-for="(img,index) in swipeImgs" :key="index">
          <img :src="img" alt />
        </mt-swipe-item>
      </mt-swipe>
      <!-- 分类 -->
      <mt-swipe :auto="0" class="entries">
        <mt-swipe-item v-for="(entry,index) in entries" :key="index" class="entry_wrap">
          <div class="foodentry" v-for="(item,i) in entry" :key="i">
            <div class="img_wrap">
              <img :src="item.image" alt />
            </div>
            <span>{{item.name}}</span>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 推荐商家 -->
    <div class="shoplist-title">推荐商家</div>
    <!-- 筛选条件导航 -->
    <FilterView :filterData="filterData" @update="update" />

    <!-- Loadmore组件实现，上拉刷新，下拉加载 -->
    <mt-loadmore
      :top-method="loadData"
      :bottom-method="loadMore"
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
      :auto-fill="false"
      :bottomPullText="bottomPullText"
    >
      <!-- 这里中间放要加载及刷新的内容 -->
      <!-- 商家信息 -->
      <div class="shopList">
        <indexShop v-for="(item,index) in restaurants" :key="index" :restaurant="item.restaurant" />
      </div>
    </mt-loadmore>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Loadmore } from "mint-ui";
import FilterView from "../components/FilterView.vue";
import indexShop from "../components/IndexShop.vue";

export default {
  name: "home",
  data() {
    return {
      swipeImgs: [],
      entries: [],
      filterData: null,
      page: 1,
      size: 5,
      restaurants: [], //存放所有餐厅信息
      allLoaded: false, //判断是否所有的数据都加载完了，都加载为true
      bottomPullText: "上拉加载更多", //下拉加载的提示文字
      data: null //用于排序的data对象
    };
  },
  computed: {
    address() {
      return this.$store.getters.address;
    },
    city() {
      return (
        this.$store.getters.location.city
      );
    }
  },
  //进入前加载好数据，用于轮播
  created() {
    this.getData();
  },
  methods: {
    update(condition) {
      // console.log(condition);
      this.data=condition;
      this.loadData();
    },

    getData() {
      this.$axios("/api/profile/shopping").then(respons => {
        // console.log(respons.data);
        this.swipeImgs = respons.data.swipeImgs;
        this.entries = respons.data.entries;
      });
      this.$axios("/api/profile/filter").then(res => {
        // console.log(res.data);
        this.filterData = res.data;
      });

      this.loadData();
      //进入时，加载商家信息；下面方法下拉刷新时也会调用
    },

    loadData() {
      //更新数据，并用于上拉加载

      this.page = 1;
      this.allLoaded = false;
      this.bottomPullText = "上拉加载更多";

      //拉取商家数据
      this.$axios
        .post(`/api/profile/restaurants/${this.page}/${this.size}`,this.data)
        .then(respons => {
          // console.log(respons.data)

          //这里要调用一个方法，关掉加载中的动画，并更新数据
          this.$refs.loadmore.onTopLoaded();
          // this.$refs.loadmore.onTopLoaded();   //大Load
          this.restaurants = respons.data;
        });
    },
    loadMore() {
      //下拉更新
      if (!this.allLoaded) {
        this.page++;
        //拉取商家数据
        this.$axios
          .post(`/api/profile/restaurants/${this.page}/${this.size}`)
          .then(res => {
            //加载完后
            //下拉完成关闭动画，重新渲染
            this.$refs.loadmore.onBottomLoaded();
            this.allLoaded=false;
            if (res.data.length > 0) {
              res.data.forEach(item => {
                this.restaurants.push(item);
              });
              if (res.length < this.size) {
                this.allLoaded = true;
                this.bottomPullText = "没有更多了哦";
              }
            } else {
              this.allLoaded = true;
              this.bottomPullText = "没有更多了哦";
            }
          });
      }
    }
  },
  components: {
    FilterView,
    indexShop
  }
};
</script>

<style scoped>

.home {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.header {
  background-color: #009eef;
  padding: 10px 16px;
}

.header .address_map {
  color: #fff;
  font-weight: bold;
}
.address_map i {
  margin: 0 3px;
  font-size: 18px;
}
.address_map span {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search_wrap {
  background-color: #009eef;
  padding: 10px 16px;
}
.search_wrap {
  position: sticky;
  top: 0px;
  z-index: 999;
  box-sizing: border-box;
}

.search_wrap .shop_search {
  /* margin-top: 10px; */
  background-color: #fff;
  padding: 10px 0;
  border-radius: 4px;
  text-align: center;
  color: #aaa;
}

.swiper {
  height: 100px;
}
.swiper img {
  width: 100%;
  height: 100px;
}

.entries {
  background: #fff;
  height: 47.2vw;
  text-align: center;
  overflow: hidden;
}
.foodentry {
  width: 20%;
  float: left;
  position: relative;
  margin-top: 2.933333vw;
}
.foodentry .img_wrap {
  position: relative;
  display: inline-block;
  width: 12vw;
  height: 12vw;
}
.img_wrap img {
  width: 100%;
  height: 100%;
}
.foodentry span {
  display: block;
  color: #666;
  font-size: 0.32rem;
}
/* 推荐商家 */
.shoplist-title {
  display: flex;
  align-items: flex;
  justify-content: center;
  height: 9.6vw;
  line-height: 9.6vw;
  font-size: 16px;
  color: #333;
  background: #fff;
}
.shoplist-title:after,
.shoplist-title:before {
  display: block;
  content: "一";
  width: 5.333333vw;
  height: 0.266667vw;
  color: #999;
}
.shoplist-title:before {
  margin-right: 3.466667vw;
}
.shoplist-title:after {
  margin-left: 3.466667vw;
}

.fixedview {
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 999;
}

.mint-loadmore {
  height: calc(100% - 10vh);
  overflow: auto;
}
</style>
